<template>
	<view class="container" style="padding-bottom: 140rpx;">
		<template v-if="scene==1">
			<view class="headView" @click="headViewTap">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<image class="headImgView" :src="shopInfo.logoModel.url||userInfo.avatarUrl"
						 mode="aspectFill"></image>
						<view class="content">
							<view class="nickname uni-title-h2">{{shopInfo.name||userInfo.nickname ? shopInfo.name||userInfo.nickname : '未设置'}}</view>
							<!-- <view class="phone" v-if="userInfo.parentModel.code">推广码：{{userInfo.code}}</view> -->
							<view class="phone" style="margin-top: 10rpx;">{{shopInfo.orgModel.name||userInfo.phone}}</view>
							<!-- <view class="phone" v-else @click.stop="scanAction"><text style="margin-right: 30rpx;">扫码绑定推广人</text><u-icon name="scan" size='40rpx'></u-icon></view> -->
							<!-- <view class="phone">红娘身份：{{userInfo.rankModel.name}}</view> -->
						</view>
					</view>
					<view style="flex-shrink: 0;margin-right: 20rpx;">
						<u-icon name="arrow-right" color="#FFF" size="15"></u-icon>
					</view>
				</view>
				<!-- 二维码 -->
				<!-- <view @click.stop="scanAction" style="position: absolute;top: 100rpx;right: 20rpx;"><u-icon name="scan" size='80rpx' color='#FFF'></u-icon></view> -->
				<!-- 数据统计 -->
				<view class="loveCate">
					<view class="item" @click.stop="waitSendAction">
						<text style="font-size: 36rpx;font-weight: bold;">{{shopData.ordersForWaitSendNum||0}}</text>
						<text>待发货订单</text>
					</view>
					<view class="item" @click.stop="goWallet">
						<text style="font-size: 36rpx;font-weight: bold;">{{shopData.totalOrderMoney||0}}</text>
						<text>今日业绩（元）</text>
					</view>
				</view>
			</view>
			<!-- 分类 -->
			<view v-for="(obj, inx) in itemList" :key='inx'
			style="width: 710rpx;padding: 0 20rpx;background-color: #FFFFFF;margin-top: 30rpx;">
				<view style="width: 670rpx;height: 100rpx;line-height: 100rpx;margin-left: 20rpx;border-bottom: 1px solid #eeeeee;">{{obj.title}}</view>
				<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
					<view v-for="(item, index) in obj.items" :key="index" @click="itemTap(item, index)"
					style="width: 177rpx;display: flex;flex-direction: column;align-items: center;">
						<u-icon :customStyle="{paddingTop:30+'rpx'}" :name="item.icon" size="30" :color='item.color'></u-icon>
						<text style="margin-top: 12rpx;margin-bottom: 20rpx;font-size: 26rpx;">{{item.title}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="scene==2">
			<view>
				<view class=""><u-parse :content="pageConfig.longtext" :selectable="true"></u-parse></view>
				<view style="margin-top: 60rpx;margin-left: 100rpx;width: 550rpx;">
					<u--form
						labelPosition="left"
						:model="form"
						ref="form"
						labelWidth='180rpx'
					>
						<u-form-item label="校区" borderBottom>
							<view v-if='form.orgName' @click="orgShow = true">{{form.orgName}}</view>
							<view v-else @click="orgShow = true" style="color: #999;">请选择校区</view>
							<u-picker :show="orgShow" :columns="orgList" keyName='name' @cancel='close' @confirm='orgAction'></u-picker>
						</u-form-item>
						<u-form-item label="代理分类" borderBottom>
							<view v-if='form.cateName' @click="cateShow = true">{{form.cateName}}</view>
							<view v-else @click="cateShow = true" style="color: #999;">请选择分类</view>
							<u-picker :show="cateShow" :columns="cateList" keyName='name' @cancel='close' @confirm='cateAction'></u-picker>
						</u-form-item>
					</u--form>
				</view>
				<view style="width: 400rpx;margin: 100rpx auto;">
					<u-button type="primary" text="申请代理" @click="applyAction"></u-button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>

	import {
		user
	} from '@/api/user.js'
	import {
		common
	} from '@/api/common.js'
	import {
		merchant
	} from '@/api/merchant.js'
	import { product } from '@/api/product.js'
	import {
		page
	} from '@/api/page.js'
	import { shop } from '@/api/shop.js'
	import {toLogin} from '@/router/index.js';
	import {wxminiproPay} from '@/common/utils/wxminiproPay.js'
	export default {
		components: {
		},
		data() {
			return {
				scene: 0,
				pageConfig: {},
				serviceDict: {},
				isLogin: false,
				shopInfo: {},
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 44,
				userInfo: {rankModel:{}, openshopModel: {}, rankModel: {}},
				form: {},
				shopData: {},
				cateList: [],
				orgList: [],
				orgShow: false,
				cateShow: false,
				itemList: [
					{
						title: '门店管理',
						items: [
							{
								title: "我的店铺",
								icon: 'bag-fill',
								color: '#2979ff',
								name: 'shop',
								value: '',
								params: {
								}
							},
							{
								title: "产品库",
								icon: 'coupon-fill',
								color: '#fa3534',
								name: 'productLibrary',
								value: '',
								params: {
								}
							},
							{
								title: "采购订单",
								icon: 'file-text-fill',
								color: '#ffa100',
								name: 'orderListForStock',
								value: '',
								params: {
									scene: 'stockCart'
								}
							},
							{
								title: "进货车",
								icon: 'shopping-cart-fill',
								color: '#19be6b',
								name: 'stockCart',
								value: ''
							},
							{
								title: "店铺二维码",
								icon: 'scan',
								color: '#b38241',
								name: 'shopQrcode',
								value: '',
								params: {
								}
							},
							{
								title: "提现账户",
								icon: 'lock-fill',
								color: '#ff3947',
								name: 'payway',
								value: ''
							},
							{
								title: "跑腿订单",
								icon: 'list-dot',
								color: '#c1ae13',
								name: 'orderForRider',
								value: ''
							}
						],
					},
					{
						title: '门店订单', 
						items: [
							{
								title: "待付款",
								name: 'orderListForShop',
								icon: '/static/common/mine/wait_pay.png',
								iconColor: '#FC5E53',
								value: '',
								params: {
									current: '0',
								}
							},
							{
								title: "待发货",
								name: 'orderListForShop',
								icon: '/static/common/mine/wait_send.png',
								iconColor: '#FC5E53',
								value: '',
								params: {
									current: '1',
								}
							},
							{
								title: "已配送",
								name: 'orderListForShop',
								icon: '/static/common/mine/finish.png',
								iconColor: '#d0541c',
								value: '',
								params: {
									current: '2',
								}
							}
						],
					},
					{
						title: '财务管理', 
						items: [
							{
								title: "我的钱包",
								icon: 'rmb-circle-fill',
								color: '#ff9014',
								name: 'wallet',
								value: ''
							},
						]
					}
				]
			}
		},
		onLoad() {
			var that = this
			uni.$on('mineKey', function(data) {
				console.log("收到通知，刷新数据")
				that.loadData()
			})
		},
		onShow() {
			this.loadData()
		},
		//一定要在此处销毁监听事件，否则会造成多次跳转
		onUnload() {
			uni.$off('mineKey')
			uni.navigateBack({
				delta: 3
			})
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onShareAppMessage(res) {
			return {
				title: '',
				path: this.$Route.path
			}
		},
		methods: {
			loadData() {
				if (this.$storage.getStorageDataSync(this.$store.state.token)) {
					this.isLogin = true
					this.getUserInfo()
				} else {
					this.isLogin = false
					this.userInfo = {rankModel:{}, openshopModel: {}}
				}
				this.getItemByUserId()
			},
			getPageByClientname() {
				page.getPageByClientname({
					name: 'applyAgent'
				}).then(res => {
					if (res.data.code == 10000) {
						this.pageConfig = res.data.data
					}
				})
			},
			headViewTap(){
				this.$Router.push({
					name: 'shopInfo'
				})
			},
			close(){
				this.cateShow = false
				this.orgShow = false
			},
			cateAction(e){
				this.cateShow = false
				this.form.cate = e.value[0].id
				this.form.cateName = e.value[0].name
			},
			orgAction(e){
				this.orgShow = false
				this.form.org = e.value[0].id
				this.form.orgName = e.value[0].name
			},
			itemTap(item, index) {
				var params = item.params
				if (item.name == 'shop' || item.name == 'orderListForShop' || item.name == 'productLibrary' || item.name == 'shopQrcode'){
					if(this.shopInfo.id) {
						params['shop'] = this.shopInfo.id
					}else{
						return
					}
				}
				this.$Router.push({
					name: item.name,
					params: params
				})
			},
			waitSendAction(){
				this.$Router.push({
					name: 'orderListForShop',
					params: {
						current: '1',
					}
				})
			},
			getUserInfo() {
				user.getUserInfo().then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						this.userInfo = res.data.data
					}
				})
			},
			getItemByUserId() {
				shop.getShopinfoByUserId({
					userId: this.$storage.getStorageDataSync(this.$store.state.userInfo).id
				}).then(res => {
					if (res.data.code == 10000) {
						this.shopInfo = res.data.data
						if(this.shopInfo.id){
							this.scene = 1
							this.getShopData()
						}else{
							this.scene = 2
							this.getCateList()
							this.getOrgList()
							this.getPageByClientname()
						}
					}
				})
			},
			getShopData(){
				common.operateActionPost('/merchant/shop/getShopDataByShopId/', {
					shopId: this.shopInfo.id,
				}).then(res => {
					if(res.data.code == 10000){
						this.shopData = res.data.data
					}
				})
			},
			getOrgList(){
				common.operateActionGet('/system/org/', {}).then(res => {
					if(res.data.code == 10000){
						this.orgList = [res.data.data.list]
					}
				})
			},
			getCateList(){
				common.operateActionGet('/merchant/cate/', {}).then(res => {
					if(res.data.code == 10000){
						this.cateList = [res.data.data.list]
					}
				})
			},
			applyAction(){
				if(!this.form.org){
					this.$show.showMessage('请选择校区')
					return
				}else if(!this.form.cate){
					this.$show.showMessage('请选择分类')
					return
				}else{
					common.operateActionPost('/merchant/applyAgent/createAction/', {
						org: this.form.org,
						cates: [this.form.cate]
					}).then(res => {
						if (res.data.code == 10000) {
							
						}
					})
				}
			},
			goWallet(){
				this.$Router.push({
					name: 'wallet'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-bottom: 60rpx;
	}
	.headView {
		width: 710rpx;
		height: 320rpx;
		padding-top: 30rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: 30rpx;
		background-image: linear-gradient(-90deg, #2c84f8, #4473ff);

		.headImgView {
			margin-top: 30rpx;
			margin-left: 20rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 70rpx;
		}

		.content {
			margin-left: 18px;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
			.nickname {
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.phone {
				color: #FFFFFF;
				font-size: 26rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

		.login {
			margin-top: 40rpx;
			margin-left: 40rpx;
		}
	}

	.main {
		position: relative;
		top: -60rpx;
	}

	.loveCate {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 710rpx;
		height: 160rpx;
		border-radius: 14rpx;
		margin-left: 20rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 375rpx;
			font-size: 28rpx;
			position: relative;
			color: #FFFFFF;
		}
	}

	// 订单
	.orderView{
		background-color: #FFFFFF;
		width: 710rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		padding: 30rpx 0rpx;

		.title {
			margin: 0 30rpx;
			padding-bottom: 10rpx;
			font-weight: bold;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.orderCate {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 162.5rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				position: relative;

				text {
					margin-top: 16rpx;
				}
			}
		}
	}
	// 会员服务
	.serviceView{
		background-color: #FFFFFF;
		width: 710rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		.serviceCate{
			width: 100%;
			.grid-text {
				font-size: 14px;
				color: #333;
				padding: 14rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}
	}

	.itemList {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 710rpx;
		background-color: #FFFFFF;
	}
	.bagShopCenter {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-right: 50rpx;
		text-align: center;
		background-color: red;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 32rpx;
		position: relative;
		right: -20rpx;
		
	}
</style>
